<template>
  <div class="sideBar">
    <router-link to="/QuXianSD">
      <button class="button" @click="buttonClick(1)" :class="buttonIndex == 1?'bgcolor':''">湿度曲线图</button>
    </router-link>
    <router-link to="/QuXianGZ">
      <button class="button"  @click="buttonClick(2)" :class="buttonIndex == 2?'bgcolor':''">光照曲线图</button>
    </router-link>
    <router-link to="/QuXianWD">
      <button class="button"  @click="buttonClick(3)" :class="buttonIndex == 3?'bgcolor':''">温度曲线图</button>
    </router-link>

    <router-link to="/ZhuZhuangSD">
      <button class="button" @click="buttonClick(4)" :class="buttonIndex == 4?'bgcolor':''">湿度柱状图</button>
    </router-link>
    <router-link to="/ZhuZhuangGQ">
      <button class="button" @click="buttonClick(5)" :class="buttonIndex == 5?'bgcolor':''">光强柱状图</button>
    </router-link>
    <router-link to="/ZhuZhuangWD">
      <button class="button" @click="buttonClick(6)" :class="buttonIndex == 6?'bgcolor':''">温度柱状图</button>
    </router-link>

    <router-link to="/ExcelSD">
      <button class="button" @click="buttonClick(7)" :class="buttonIndex == 7?'bgcolor':''">湿度列表</button>
    </router-link>
    <router-link to="/ExcelGQ">
      <button class="button" @click="buttonClick(8)" :class="buttonIndex == 8?'bgcolor':''">光强列表</button>
    </router-link>
    <router-link to="/ExcelWD">
      <button class="button" @click="buttonClick(9)" :class="buttonIndex == 9?'bgcolor':''">温度列表</button>
    </router-link>


<!--    <router-link to="/mainContent/RollStudents">-->
<!--      <button class="button" style="width:100px">数据列表显示</button>-->
<!--    </router-link>-->
  </div>
</template>

<script>
export default {
  name: 'SideBar',
        data(){
            return {
                buttonIndex: 1
            };
        },
        methods:{
            buttonClick(buttonIndex){
                this.buttonIndex = buttonIndex
            },
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.sideBar{
  width: 150px;
  height: 700px;
  background-color: #7cbbd9;
  float: left;
}
button{
  height: 40px;
  margin-top: 35px;
  font-size: 15px;
  font-family: 'Times New Roman', serif;
  background-color: #e4edee;
  border: 2px solid #d0e2d0;
  border-radius: 8px;
}
/* 悬停按钮 */
.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

.bgcolor {
  background-color: chartreuse;
  border: 0;
  outline: none;
}
button:focus{outline:0;}
</style>
